/*
 * experimentproperty.qml 实验运行配置
 */
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import QtCharts 2.15

Item {
    id: expRunning

    /* property 定义开始 */
    // 信号
    signal nextPage(); // 切换到下一页
    signal prevPage(); // 切换到上一页
    /* property 定义结束 */

    // tabbar nav
    TabbarNav {
        anchors.fill: parent
        title: "运行详情"
        z: 999
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // 主体部分
        Rectangle {
            id: mainPart
            Layout.fillWidth: true
            Layout.preferredHeight: parent.height - btnContainer.height
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignTop

            // 背景
            Rectangle {
                anchors.fill: parent
                LinearGradient {
                    anchors.fill: parent
                    start: Qt.point(0, 0)
                    end: Qt.point(0, height)
                    gradient: Gradient {
                        GradientStop {position: 0.0; color: "#007BD8"}
                        GradientStop {position: 1.0; color: "#001A5A"}
                    }
                }
            }

            // 左右箭头按钮
            Rectangle {
                width: 50
                height: 50
                color: "transparent"
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                z: 999

                RightArrowButton {
                    id: rightarw
                    anchors.fill: parent
                    onClicked: expRunning.nextPage() // 切换到下一页
                }
            }

            Rectangle {
                width: 50
                height: 50
                color: "transparent"
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                z: 999

                LeftArrowButton {
                    id: leftarw
                    anchors.fill: parent
                    onClicked: expRunning.prevPage() // 切换到上一页
                }
            }

            // 内容
            Rectangle {
                id: contents
                anchors.fill: parent
                color: "transparent"

                ColumnLayout {
                    anchors.fill: parent
                    spacing: 0
                    anchors.leftMargin: 16
                    anchors.rightMargin: 16
                    anchors.topMargin: 74

                    // 运行详情
                    Item {
                        id: runningDetails
                        Layout.fillWidth: true
                        Layout.preferredHeight: 84

                        RowLayout {
                            anchors.fill: parent
                            spacing: 8

                            // 温度
                            Item {
                                Layout.preferredWidth: 242
                                // Layout.fillWidth: true
                                Layout.fillHeight: true
                                Layout.alignment: Qt.AlignCenter

                                // 背景
                                Image {
                                    anchors.fill: parent
                                    source: "qrc:/icons/running_temp.png"
                                    fillMode: Image.PreserveAspectFit
                                }

                                // 内容
                                Item {
                                    anchors.fill: parent
                                    anchors.topMargin: 17

                                    ColumnLayout {
                                        anchors.fill: parent
                                        anchors.margins: 0
                                        spacing: 0

                                        // 标题
                                        Label {
                                            Layout.fillWidth: true
                                            font.family: "Alibaba PuHuiTi"
                                            font.pixelSize: 15
                                            color: "#222"
                                            text: qsTr("温度℃")
                                            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                                            horizontalAlignment: Text.AlignHCenter
                                            verticalAlignment: Text.AlignTop

                                            // Rectangle {
                                            //     anchors.fill: parent
                                            //     color: "red"
                                            // }
                                        }

                                        // 内容
                                        Item {
                                            Layout.fillWidth: true
                                            Layout.fillHeight: true
                                            Layout.alignment: Qt.AlignTop

                                            RowLayout {
                                                anchors.fill: parent
                                                spacing: 7

                                                CustomHorSpacerItem {}

                                                // 温度
                                                Label {
                                                    font.family: "Alibaba PuHuiTi"
                                                    font.pixelSize: 32
                                                    color: "#222"
                                                    text: qsTr("94")
                                                    horizontalAlignment: Text.AlignHCenter
                                                    verticalAlignment: Text.AlignTop

                                                    // Rectangle {
                                                    //     anchors.fill: parent
                                                    //     color: "green"
                                                    // }
                                                }

                                                // 图标
                                                Image {
                                                    Layout.preferredWidth: 15
                                                    Layout.preferredHeight: 24
                                                    source: "qrc:/icons/heating.gif"
                                                    fillMode: Image.PreserveAspectFit

                                                    // Rectangle {
                                                    //     anchors.fill: parent
                                                    //     color: "blue"
                                                    // }
                                                }

                                                CustomHorSpacerItem {}
                                            }
                                        }

                                    }
                                }
                            }

                            // 步骤
                            Item {
                                Layout.preferredWidth: 242
                                // Layout.fillWidth: true
                                Layout.fillHeight: true
                                Layout.alignment: Qt.AlignCenter

                                // 背景
                                Image {
                                    anchors.fill: parent
                                    source: "qrc:/icons/running_step.png"
                                    fillMode: Image.PreserveAspectFit
                                }

                                // 内容
                                Item {
                                    anchors.fill: parent
                                    anchors.topMargin: 17

                                    ColumnLayout {
                                        anchors.fill: parent
                                        spacing: 0

                                        // 标题
                                        Label {
                                            font.family: "Alibaba PuHuiTi"
                                            font.pixelSize: 17
                                            color: "#222"
                                            text: qsTr("步骤")
                                            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                                            horizontalAlignment: Text.AlignHCenter
                                            verticalAlignment: Text.AlignTop
                                        }

                                        // 内容
                                        Label {
                                            font.family: "Alibaba PuHuiTi"
                                            font.pixelSize: 32
                                            color: "#222"
                                            text: qsTr("第 3 步")
                                            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                                            horizontalAlignment: Text.AlignHCenter
                                            verticalAlignment: Text.AlignTop
                                        }

                                        CustomVerSpacerItem {}
                                    }
                                }
                            }

                            // 循环
                            Item {
                                Layout.preferredWidth: 242
                                // Layout.fillWidth: true
                                Layout.fillHeight: true
                                Layout.alignment: Qt.AlignCenter

                                // 背景
                                Image {
                                    anchors.fill: parent
                                    source: "qrc:/icons/running_cycling.png"
                                    fillMode: Image.PreserveAspectFit
                                }

                                // 内容
                                Item {
                                    anchors.fill: parent
                                    anchors.topMargin: 17

                                    ColumnLayout {
                                        anchors.fill: parent
                                        spacing: 0

                                        // 标题
                                        Label {
                                            font.family: "Alibaba PuHuiTi"
                                            font.pixelSize: 17
                                            color: "#222"
                                            text: qsTr("循环")
                                            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                                            horizontalAlignment: Text.AlignHCenter
                                            verticalAlignment: Text.AlignTop
                                        }

                                        // 内容
                                        Label {
                                            font.family: "Alibaba PuHuiTi"
                                            font.pixelSize: 32
                                            color: "#222"
                                            text: qsTr("11/43")
                                            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                                            horizontalAlignment: Text.AlignHCenter
                                            verticalAlignment: Text.AlignTop
                                        }

                                        CustomVerSpacerItem {}
                                    }
                                }
                            }

                            // 运行时间
                            Item {
                                Layout.preferredWidth: 242
                                // Layout.fillWidth: true
                                Layout.fillHeight: true
                                Layout.alignment: Qt.AlignCenter

                                // 背景
                                Image {
                                    anchors.fill: parent
                                    source: "qrc:/icons/running_time.png"
                                    fillMode: Image.PreserveAspectFit
                                }

                                // 内容
                                Item {
                                    anchors.fill: parent
                                    anchors.topMargin: 17

                                    ColumnLayout {
                                        anchors.fill: parent
                                        spacing: 0

                                        // 标题
                                        Label {
                                            font.family: "Alibaba PuHuiTi"
                                            font.pixelSize: 17
                                            color: "#222"
                                            text: qsTr("运行时间")
                                            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                                            horizontalAlignment: Text.AlignHCenter
                                            verticalAlignment: Text.AlignTop
                                        }

                                        // 内容
                                        Label {
                                            font.family: "Alibaba PuHuiTi"
                                            font.pixelSize: 32
                                            color: "#222"
                                            text: qsTr("00:23:25")
                                            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                                            horizontalAlignment: Text.AlignHCenter
                                            verticalAlignment: Text.AlignTop
                                        }

                                        CustomVerSpacerItem {}
                                    }
                                }
                            }

                        }
                    }

                    // 图表
                    Item {
                        id: chartsCon
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.topMargin: 17

                        // 下拉框
                        CustomComboBox {
                            width: 210
                            height: 42
                            anchors.top: parent.top
                            anchors.left: parent.left
                            comboBgColor: "transparent"
                            comboBorderColor: "#FFFFFFFF"
                            comboFontColor: "#FFF"
                            popUpFontColor: "#222"
                            model: ["实时图谱", "曲线图谱"]

                            onCurrentIndex: {
                                chartsStackLayout.currentIndex = index
                            }
                        }

                        // 图表
                        Item {
                            id: chartsContainer
                            anchors.fill: parent

                            StackLayout {
                                id: chartsStackLayout
                                anchors.fill: parent

                                // 实时图谱
                                RunningChartCurrent {
                                    id: currentChart
                                    Layout.fillWidth: true
                                    Layout.fillHeight: true
                                }

                                // 曲线图谱
                                RunningChartCurve {
                                    id: curveChart
                                    Layout.fillWidth: true
                                    Layout.fillHeight: true
                                }
                            }

                        }
                    }

                    // 通信状态
                    Rectangle {
                        Layout.minimumHeight: 18
                        Layout.bottomMargin: 5
                        Layout.topMargin: 5
                        Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
                        color: "transparent"

                        RowLayout {
                            anchors.fill: parent
                            spacing: 10

                            Label {
                                font.pixelSize: 16
                                font.family: "Alibaba PuHuiTi"
                                color: "#FFF"
                                text: qsTr("通信状态：")
                            }

                            Image {
                                Layout.preferredWidth: 18
                                Layout.preferredHeight: 18
                                source: "qrc:/icons/net_status_connected.png"
                            }

                            Label {
                                font.pixelSize: 16
                                font.family: "Alibaba PuHuiTi"
                                color: "#FFF"
                                text: qsTr("已连接")
                            }
                        }
                    }
                }
            }
        }

        // 按钮部分
        Rectangle {
            id: btnContainer
            Layout.fillWidth: true
            Layout.preferredHeight: 80

            RowLayout {
                height: parent.height
                anchors.rightMargin: 16
                anchors.right: parent.right

                GradientButton {
                    id: stopExp
                    gradText: "停止实验(F)"
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                }
            }
        }
    }
}
